<template>
    <div class="reg-box">
        <van-nav-bar title="用户注册" left-arrow @click-left="onClickLeft"/>

        <van-form @submit="onSubmit">
            <!-- 用户名称 -->
            <van-field v-model="username"
                name="name"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"/>
            
            <!-- 用户密码 -->
            <van-field v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"/>

            <!-- 头像 -->
            <van-field name="photo" label="头像" :rules="[{ required: true, message: '请上传头像' }]">
                <template #input>
                    <van-uploader v-model="uploader"/>
                </template>
            </van-field>

            <!-- 性别 -->
            <van-field readonly
                clickable
                name="sex"
                :value="sex"
                label="性别"
                placeholder="选择性别"
                @click="showPicker = true"
                :rules="[{ required: true, message: '请选择性别' }]"/>

            <!-- 地址 -->
            <van-field readonly
                clickable
                name="address"
                :value="address"
                label="地址"
                placeholder="选择地址"
                @click="showArea = true"
                :rules="[{ required: true, message: '请选择地址' }]"/>

            <!-- 生日 -->
            <van-field readonly
                clickable
                name="birthday"
                :value="data"
                label="出生日期"
                placeholder="点击选择日期"
                @click="showData = true"/>

            <!-- 电话 -->
            <van-field v-model="tel"
                name="phone"
                label="电话"
                placeholder="电话号码"
                type="tel"
                :rules="[{ required: true, message: '请填写电话号码' }]"/>

            <!-- 邮箱 -->
            <van-field v-model="email"
                name="email"
                label="邮箱"
                placeholder="邮箱"
                :rules="[{ required: true, message: '请填写邮箱' }]"/>

            <!-- 签名 -->
            <van-field v-model="remark"
                name="remark"
                label="个性签名"
                rows="2"
                autosize
                type="textarea"
                maxlength="50"
                show-word-limit
                placeholder="个性签名"/>

            <!-- 提交按钮 -->
            <div style="margin: 16px;">
                <van-button round block type="info" color="linear-gradient(to right, #ff6034, #ee0a24)" native-type="submit">提交</van-button>
            </div>
        </van-form>


        <!-- 性别弹出框 -->
        <van-popup v-model="showPicker" position="bottom">
            <van-picker show-toolbar
                :columns="columns"
                @confirm="onSex"
                @cancel="showPicker = false"/>
        </van-popup>

        <!-- 地址弹出框 -->
        <van-popup v-model="showArea" position="bottom">
            <van-area :area-list="areaList"
                @confirm="onAddress"
                @cancel="showArea = false"/>
        </van-popup>

        <!-- 日期弹出框 -->
        <!-- <van-calendar v-model="showData" :min-date="minDate" :max-date="maxDate" @confirm="onData" /> -->
        <van-popup v-model="showData" position="bottom">
            <van-datetime-picker type="date" @confirm="onData" @cancel="showPicker = false" title="出生日期" :min-date="minDate" :max-date="maxDate"/>
        </van-popup>


    </div>
</template>

<script>
    import { areaList } from '@vant/area-data'
    import { reg, upload } from '../../apis/regApi'
    export default {
        data(){
            return{
                username:'', // 用户名
                password:'', // 密码
                uploader: [], // 头像

                sex: '', // 性别
                columns: ['保密', '男', '女'], // 性别选择
                showPicker: false, // 关闭性别选择

                address:'', // 地址
                showArea:false, // 关闭地址选择
                areaList, // 地址可选列表

                showData:false, // 控制日期显示
                data:'', // 选择的日期
                minDate: new Date(1975, 0, 1), // 最小日期
                maxDate: new Date(2022, 3, 30), //最大日期

                tel:'', // 电话号码
                email:'', // 邮箱
                remark:'', // 签名

            }
        },
        methods: {
            // 返回登录页面
            onClickLeft(){
                this.$router.push('/login')
            },
            // 表单提交事件
            onSubmit(data){
                this.$toast.loading({
                    message: '注册中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
                let fd = new FormData()
                fd.append('file', data.photo[0].file)

                upload(fd).then(res => {
                    data.photo = res.data[0]
                    data.id = this.tel

                    reg(data).then(res => {
                        this.$toast.clear(true)
                        if (res.code === 200) {
                            this.$router.push('/login')
                            this.$toast({
                                message: '注册成功，请登录',
                                position: 'bottom',
                            });
                        }else{
                            this.$toast({
                                message: res.message,
                                position: 'bottom',
                            });
                        }
                    })
                })
            },
            // 关闭选中框
            onSex(sex) {
                this.sex = sex;
                this.showPicker = false;
            },
            // 关闭地址选择
            onAddress(address) {
                this.address = address
                    .filter((item) => !!item)
                    .map((item) => item.name)
                    .join('/');
                this.showArea = false;
            },
            // 关闭地址选择
            onData(date) {
                console.log(date);
                this.data = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
                this.showData = false;
            }
        }
    }
</script>

<style lang="less" scoped>
    .reg-box{
        height: 100%;
    }
</style>